<%--
  Created by IntelliJ IDEA.
  User: 王韫琛
  Date: 2021/1/28
  Time: 2:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.all.js">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.js">
</head>
<body>
<br>
<%--搜索表单开始--%>
<form class="layui-form layui-form-pane" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label" for="permission" style="width: 136px">选择发布者身份:</label>
        <div class="layui-input-inline">
            <select name="permission" id="permission" required lay-verify="required">
                <option value="">请选择</option>
                <option value="普通管理员">普通管理员</option>
                <option value="超级管理员">超级管理员</option>
            </select>
        </div>
        <button class="layui-btn" lay-submit lay-filter="doSearch">搜索</button>
    </div>

</form>
<%--搜索表单结束--%>

<table class="layui-hide" id="test" lay-filter="test"></table>
<%--表格渲染结束--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.js"></script>

<script>
    layui.use(['form', 'jquery', 'table', 'laydate', 'layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //日期控件
        laydate.render({
            elem: '#test1' //指定元素
            ,format: 'yyyy-MM-dd'
        });
        //表单渲染开始
        var tableIns = table.render({
            elem: '#test'
            , height: 524
            , url: '/userAdminFindPage'
            , page: true //开启分页
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'author', title: '发布者姓名', width: 120, edit: 'text'}
                , {field: 'grade', title: '发布者身份',width: 120,  align: "center"}
                , {field: 'title', title: '公告标题', width: 160, align: "center"}
                , {field: 'content', title: '公告内容', align: "center"}
                , {field: 'add_time', title: '添加时间', width: 200, align: "center",sort: true}
            ]]
            , request: {
                pageName: 'pageNum' // 页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , id: 'testReload'
        });
        //表单渲染结束

        //头工具栏事件开始
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
        });
        //头工具栏事件结束


        var mainIndex;//窗口索引
        var url;//提交地址


        //监听表单提交事件开始
        form.on("submit(doSubmit)", function (data) {

            $.post(url, data.field, function (result) {
                if (result.success) {
                    layer.alert(result.message, {icon: 1});
                    //关闭窗口
                    layer.close(mainIndex);
                    //刷新数据表格
                    tableIns.reload();
                } else {
                    layer.alert(result.message, {icon: 2});
                }
            }, "json");
            return false;
        });
        //监听表单提交事件结束
        //监听搜索按钮得提交开始
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                url: '/findAllAnnMgByType',
                where: data.field,//查询条件
                page: {
                    curr: 1
                }
            })
            //禁止页面刷新
            return false;
        })
        //监听搜索按钮结束
    });
</script>
</body>
</html>
